<!-- 音标专练列表 -->

<template>
    <AppHeader title="详情" :banAnimate="true" backgroundColor="#ffffff">
        <template #left>
            <img @click="onClickLeft" src="@/assets/phoneticPractice/返回图标@3x.png" width="9" height="18" />
        </template>
    </AppHeader>
    <div class="container" v-if="taskLookDetail">
        <div class="container-height"></div>
        <div class="container-videoDiv" v-if="taskLookDetail.list.data.length">
            <video class="container-video"  @play="onPlay" :src="videoSrc"  controls></video>
                <div v-show="firstClick" class="container-video-left">{{ taskLookDetail.lookNum }}次播放</div>
                <div v-show="firstClick" class="container-video-right">{{ taskLookDetail.time }}</div>
        </div>
        <div class="container-title">
            <div>{{ route.query.name }}</div>
            <div>{{ toResult(route.query.create_time_text) }}</div>
        </div>
        <div class="container-desc">{{ route.query.desc }}</div>
        <div class="container-grade" v-if="taskLookDetail.list.data.length">
            <div @click="gradeClick(index)" :class="currentPage == index ? 'active' : ''" v-for="(item,index) in taskLookDetail.list.data" :key="item.id">{{ item.name }}</div>
        </div>
    </div>
</template>

<script setup>

import { useRouter } from 'vue-router'
import AppHeader from '@/components/AppHeader.vue'
import { onMounted, reactive, toRefs, ref } from 'vue'
import { request } from "@/api/request";
import { useRoute } from 'vue-router'
const route = useRoute()

const state = reactive({
    taskLookDetail: null
});
let currentPage = ref(0)
let firstClick = ref(true)
let videoSrc = ref('')
onMounted(async () => {
    state.taskLookDetail = await getDetail();
    setVideoSrc()
})
const onPlay =async () => {
  if(firstClick.value){
    // look/lookNum
    const res = await request({
        url: 'https://d-xueer.bigchun.com/api/look/getResourceList',
        method: 'post'
    }, {
        data: {
            id: route.query.look_id
        }
    })
    if(res.code == 1) firstClick.value = false
    
  }
};
const setVideoSrc = ()=>{
    videoSrc.value = state.taskLookDetail.list.data[currentPage.value].file
}
const toResult = (dateStr)=>{
    const [year, month, day] = dateStr.split(' ')[0].split('-');
    return`${year}年${month}月${day}日`;
}


const getDetail = async () => {
    const res = await request({
        url: 'https://d-xueer.bigchun.com/api/look/getResourceList',
        method: 'get'
    }, {
        query: {
            look_id: route.query.look_id
        }
    })
    console.log(res);
    if (res.code == 1) {
        return res.data
    }

}



const router = useRouter()
const gradeClick = (index)=>{
    if(currentPage.value !== index){
        currentPage.value = index
        setVideoSrc()
        firstClick.value = true
    }
}
const onClickLeft = () => {
    router.go(-1)
}

const { taskLookDetail } = toRefs(state)
console.log(taskLookDetail);

</script>

<style scoped lang="scss">
.container {
    width: 100%;
    // height: 100vh;
    display: flex;
    flex-direction: column;
    color: #8E8E8E;
    font-size: 14px;
    .container-videoDiv{
        position: relative;
        .container-video{
        height: 281px;
        width: 100%; 
    }
    .container-video-left{
            background: #000000;
            opacity: 0.66;
            padding: 1px 12px;
            font-size: 12px;
            color: #FFFFFF;
            position: absolute;
            bottom: 70px;
            left: 10px;
            border-radius: 11px;
        }
        .container-video-right{
            background: #000000;
            opacity: 0.66;
            padding: 5px 8px;
            font-size: 12px;
            color: #FFFFFF;
            position: absolute;
            bottom: 70px;
            right: 10px;
            border-radius: 11px;
        }
    }
    
    .container-height {
        height: 44px;
    }
    .container-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        div:nth-child(1){
            font-size: 16px;
            color: #333333;
        }
    }
    .container-desc{
        padding: 0 0 16px 0;
        margin: 15px 10px 0 10px;
        border-bottom: 1px solid #E5E5E5;
    }
    .container-grade{
        display: flex;
        // justify-content: space-around;
        flex-wrap: wrap;
        div{
            width: 105px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: #F5F5F5;
            color: #333333;
            margin-top: 10px;
            margin-left: 15px;
            border-radius: 18px;
        }
        .active{
            background: #0CB76C;
            color: #FFFFFF;
        }
    }
    
}

</style>